<template>
  <div>
    <img src="@/assets/error.jpg" alt="" v-if="starstore.length === undefined || 0" class="error-img">
    <div class="storelistclass">
      <el-row>
        <el-col class="img-top">
          <img src="@/assets/storestar.png" alt="">
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" v-for="store in starstore" :key="store.id" >
            <div class="grid-content bg-purple" @click="lookstore(store.id)">
              <img :src="store.product_img" alt="" class="storeinfo-img">
              <p class="storename">{{store.product_name}}</p>
              <p v-if="store.price.indexOf('.') === -1" class="price">￥{{ store.price }}.00</p>
              <p v-else class="price">￥{{ store.price }}</p>
            </div>
          </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getstarstoreAPI, getstoreByid } from '@/api'
import { mapMutations } from 'vuex'
export default {
  name: 'myCollect',
  data () {
    return {
      starstore: {}
    }
  },
  mounted () {
    this.getstarstoreList()
  },
  methods: {
    getstarstoreList () {
      getstarstoreAPI().then(({ data }) => {
        this.starstore = data.data
      })
    },
    ...mapMutations(['getstoredetail']),
    // 按id查看商品详情
    lookstore (id) {
      this.$router.push('/storedetail')
      getstoreByid(id).then(({ data }) => {
        this.getstoredetail(data.data)
      })
    }
  }
}
</script>

<style scoped>

.error-img {
  width: 100%;
  height: 100%;
}
.img-top {
  display: flex;
  justify-content: center;
}
.img-top img{
  width: 450px;
  height: 60px;
}
 .grid-content {
    height: 360px;
    margin-top: 30px;
    margin-left: 10px;
    border-radius: 10px;
    background-color: #fff;
  }
  .grid-content:hover {
    background-color: #fff9f5;
    border-radius: 10px;
  }
  .storename {
    margin-left: 3%;
    width:95%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor:pointer;
    font-weight: 600;
    font-size: 14px;
    color: #333;
  }
  .storename:hover {
    text-decoration: underline;
  }
  .storeinfo-img {
    display: inline-block;
    height: 260px;
    width: 95%;
    margin-left: 2%;
    object-fit: fill;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 3px;
  }
  .grid-content span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    opacity: .6;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 12px;
    cursor:pointer;
  }
  .price {
    color:red;
  }

</style>
